<template>
  <div>
    <div class="head">
      <span class="ht" :select="type == 0" @click="type = 0"
        >1.{{ t("用户发起退款退货申请") }}</span
      >
      <span class="ht" :select="type == 1" @click="type = 1"
        >2.{{ t("等待平台处理") }}</span
      >
      <span class="ht" :select="type == 2" @click="type = 2"
        >3.{{ t("用户退货") }}</span
      >
      <span class="ht" :select="type == 3" @click="type = 3"
        >4.{{ t("退货退款完成") }}</span
      >
    </div>
    <div class="info" v-if="form">
      <div class="left">
        <orderReturnGoodsInfo
          v-if="type == 0"
          :goods="form"
        ></orderReturnGoodsInfo>
        <orderRefundPlatform
          v-if="type == 1"
          :goods="form"
          @editApply="type = 0"
        ></orderRefundPlatform>
        <orderReturnNegotiationHistory
          v-if="type == 2"
          :goods="form"
        ></orderReturnNegotiationHistory>
        <orderRefundDone v-if="type == 3" :goods="form"></orderRefundDone>
      </div>
      <div class="line"></div>
      <div class="right">
        <span class="title">{{ t("订单详情") }}</span>
        <div
          class="goods-info"
          v-for="(item, index) in form.goods"
          :key="index"
        >
          <el-image
            class="cover"
            :src="item.image | imgSrc"
            alt=""
            fit="scale-down"
          ></el-image>
          <div class="goods_desc flex-column">
            <span class="name">{{ item.title }}</span>
            <span class="mode">{{
              $t("购物车.颜色") + ":" + item.difference
            }}</span>
          </div>
        </div>
        <div style="height: 20px"></div>
        <div class="table flex-column">
          <div class="t flex-row">
            <span class="t1">{{ t("订单编号") }}：</span>
            <span class="t2">{{ form.pay.order_no }}</span>
          </div>
          <div class="t flex-row">
            <span class="t1">{{ t("单价") }}：</span>
            <span class="t2">{{
              $t("公共.货币符号") + form.pay.price + ";数量*" + form.pay.number
            }}</span>
          </div>
          <div class="t flex-row">
            <span class="t1">{{ t("商品总价") }}：</span>
            <span class="t2 price"
              >{{ $t("公共.货币符号") }}{{ form.pay.total_amount }}</span
            >
          </div>
        </div>
        <div v-if="type != 0" style="width: 100%">
          <el-divider></el-divider>
          <div class="table flex-column">
            <div class="t flex-row">
              <span class="t1">{{ t("退款编号") }}：</span>
              <span class="t2">{{ form.refund_res.id }}</span>
            </div>
            <div class="t flex-row">
              <span class="t1">{{ t("退款金额") }}：</span>
              <span class="t2">￥{{ form.refund_res.price }}</span>
            </div>
            <div class="t flex-row">
              <span class="t1">{{ t("申请件数") }}：</span>
              <span class="t2">{{ form.pay.number }}</span>
            </div>
            <div class="t flex-row">
              <span class="t1">{{ t("退款原因") }}：</span>
              <span class="t2">{{ form.refund_res.refund_cause }}</span>
            </div>
            <div class="t flex-row">
              <span class="t1">{{ t("退款要求") }}：</span>
              <span class="t2">{{ form.refund_res.refund_content }}</span>
            </div>
            <div class="t flex-row">
              <span class="t1">{{ t("交易状态") }}：</span>
              <span class="t2">{{ form.refund_res.status_text }}</span>
            </div>
            <div class="t flex-row">
              <span class="t1">{{ t("退款说明") }}：</span>
              <span class="t2">{{ form.refund_res.refund_content }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import orderReturnGoodsInfo from "./orderReturnGoodsInfo.vue";
import orderRefundPlatform from "./orderRefundPlatform.vue";
import orderReturnNegotiationHistory from "./orderReturnNegotiationHistory.vue";
import orderRefundDone from "./orderRefundDone.vue";
export default {
  components: {
    orderReturnGoodsInfo,
    orderRefundPlatform,
    orderReturnNegotiationHistory,
    orderRefundDone,
  },
  props: {
    goods: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      type: 0,
      form: null,
    };
  },
  mounted() {
    if (this.goods) {
      console.log("商品的信息------", this.goods);
      if (!this.goods.refund_res) {
        this.type = 0;
      } else if (this.goods.refund_res.state == 0) {
        this.type = 1;
      } else if (
        this.goods.refund_res.expressType == 0 &&
        this.goods.refund_res.type == 1
      ) {
        this.type = 2;
      } else {
        this.type = 3;
      }
      this.form = this.$util.deepClone(this.goods);
    }
  },
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`我的订单.${v}`);
    },
  },
};
</script>
<style lang="less" scoped>
.head {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: row;

  .ht {
    width: 24%;
    background: #f9f9f9;
    color: #333;
    font-size: 18px;
    text-align: center;
    line-height: 60px;
  }

  .ht[select] {
    background: #ff5757;
    color: #fff;
  }
}

.info {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: row;

  .left {
    width: 550px;
    // flex: 7;
  }

  .line {
    margin: 0px 20px;
    border: 1px solid #f1f1f1;
  }

  .right {
    width: 400px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;

    .goods-info {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: row;

      .cover {
        width: 64px;
        height: 64px;
      }

      .goods_desc {
        margin-left: 10px;
        justify-content: flex-start;
        align-items: flex-start;

        .name {
          color: #000;
          font-size: 16px;
          line-height: normal;
          margin-bottom: 10px;
        }

        .mode {
          color: #999;
          font-size: 14px;
          line-height: normal;
          margin-bottom: 10px;
        }
      }
    }

    .title {
      color: #333;
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .table {
      justify-content: flex-start;
      align-items: flex-start;

      .t {
        align-items: center;
        margin-bottom: 12px;
        color: #333;
        font-size: 16px;

        .t1 {
          // width: 80px;
        }

        .t2 {
          color: #333;
        }

        .price {
          color: #ff0000;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
